<!-- 搜索推荐组件 -->

<!-- 传递属性 -->
<!-- headTitle:传递标题
     headTitleIcon:标题左边图标
     itemList:成员渲染数组 
	   ifClearBtn:是否开启清除图标按键  默认false-->
<!-- 传递方法 -->
<!-- clearList:清除图标点击函数
     constItems:成员点击函数：使用父级函数 传递文字内容value -->
<!-- ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————— -->

<template>
  <div class="components_searchRecommended">
    <!-- 标题 -->
    <div class="components_searchRecommended-title">
      <!-- 标题旁边的图标 -->
      <span :style="{ backgroundImage: 'url(' + headTitleIcon + ')' }"></span>

      <!-- 标题内容 -->
      {{ headTitle }}

      <!-- 图标(清除图标) -->
      <div
        class="components_searchRecommended-title-icon"
        v-show="ifClearBtn"
        @click="clearBtn"
      ></div>
    </div>

    <!-- 成员循环区域 -->
    <div class="components_searchRecommended-const">
      <!-- 成员 -->
      <div
        class="components_searchRecommended-const-item"
        v-for="(value, index) in itemList"
        :key="index"
        @click="constItem(value)"
      >
        {{ value }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 传递标题
    headTitle: {
      type: [String],
      default: '',
    },
    // 标题左边图标
    headTitleIcon: {
      type: [String],
      default: '',
    },
    // 成员渲染数组
    itemList: {
      type: [Array],
      default() {
        return []
      },
    },
    // 是否开启清除图标按键  默认false
    ifClearBtn: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {}
  },
  methods: {
    // 清除图标点击函数
    clearBtn() {
      // 使用父级函数
      this.$emit('clearList')
    },

    // 成员点击函数
    constItem(value) {
      // 使用父级函数 传递文字内容value
      this.$emit('constItems', {
        value: value,
      })
    },
  },
}
</script>

<style scoped lang="less">
/*  搜索推荐组件 */
.components_searchRecommended {
  width: 343px;
  margin: auto;
  padding-bottom: 22px;

  /*  标题 */
  .components_searchRecommended-title {
    width: 100%;
    height: 20px;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    position: relative;

    // 左边图标样式
    & > span {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }

  /*  图标(清除图标) */
  .components_searchRecommended-title-icon {
    width: 20px;
    height: 20px;
    background-image: url('https://oss04.komect.com/cms/337345668630786944');
    position: absolute;
    right: 0;
  }

  /*  成员循环区域 */
  .components_searchRecommended-const {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 16px;
    gap: 12px;
    font-weight: 400;
    font-size: 13px;
  }

  /*  成员 */
  .components_searchRecommended-const-item {
    padding: 6px 12px;
    // margin-right: 8px;
    background: #f5f6f8;
    border-radius: 2px;
    flex: none;
  }
}
</style>
